<HTML>
<HEAD>
<TITLE>JavaScript Source Code 3000:  Navigation:  Change 2 Frames (Source)</TITLE>
<META HTTP-EQUIV="JavaScript Source Code 3000" CONTENT = "no-cache">
<META NAME="date" CONTENT="2000-09-09">
<META NAME="channel" CONTENT="Web Developer">
<META NAME="author" CONTENT="JavaScript Source Code 3000">
<META NAME="section" CONTENT="Navigation">
<META NAME="description" CONTENT="Allow your visitors to load two separate pages in two different frames just by clicking one link!  If your site has more than two frames, you can even select which two frames to load into.  Make different links load into different frames!  A powerful way to navigate your 'frames' site is here!">
</HEAD>

<BODY BGCOLOR=#ffffff vlink=#0000ff>

<BR>
<center>
<table width="600" cellpadding="0" cellspacing="10">
<tr>
<td width="468" align="center">

	
</td>
<td width="120" align="center">

	
</td>
</tr>
</table>
<BR>
<BR>
<BASEFONT SIZE=3>
  <FONT SIZE=6>
<B><FONT SIZE="+2" FACE="Helvetica,Arial" ALIGN=RIGHT COLOR="#0000FF">
<b><A HREF="../index.htm" /" TARGET="_top">
Home</A> </b><img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}"> <b><A HREF="index.htm" /navigation/"><font color="#FF0000">Navigation</font></A> </b>
<img src="../img/arrow.gif" /img/arrow.gif" height=13 width=7 border=0 alt="}"> <FONT COLOR="#006666">Change 2 Frames</FONT></b></FONT><BR>
</B><BR>
  </FONT>
<TABLE BORDER=0 WIDTH=500 CELLPADDING=3 CELLSPACING=0>
<tr><td><font FACE=" helvetica,arial,geneva">
<br>
<br>
<!-- Description --><!--content_start-->

As you just saw, the links in the other frame (when clicked) loaded two different pages into the two frames.  Each link can even load two different pages in two different frames if you site has more than two frames.  So, if your site is in frames, why not use this script??<br><hr>
</td></tr>
</table>
<!--  Demonstration -->
<CENTER>[ <a href="change-2-frames.html" /navigation/change-2-frames.html" target="_top">see 'Change 2 Frames' again</A> ]</CENTER>
<P>
<BR>
<P>
<a name="source">
<TABLE BORDER=0 WIDTH=500 CELLPADDING=3 CELLSPACING=0>
<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Navigation:  Change 2 Frames (Frameset)</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as NotePad or SimpleText) and save (Control-s or Apple-s).  The script is yours!<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  0.70 KB  " size="32">
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- TWO STEPS TO INSTALL CHANGE 2 FRAMES (FRAMESET):

   1.  Copy the frameset code into your HTML document
   2.  Be sure to give each frame a unique 'name' --&gt;

&lt;!-- STEP ONE:  Copy this FRAMESET code into your FRAMESET page  --&gt;

&lt;html&gt;

&lt;head&gt;

&lt;title&gt;Your Site's Title Here&lt;/title&gt;

&lt;/head&gt;

&lt;frameset cols="160,*"&gt;

  &lt;frame src="http://www.yoursite.com/links-page.html"&gt;

  &lt;frameset rows="50%,50%"&gt; 

    &lt;frame src="http://www.yoursite.com/top-page.html" name="Frame_A"&gt;

    &lt;frame src="http://www.yoursite.com/bottom-page.html" name="Frame_B"&gt;

  &lt;/frameset&gt;

&lt;/frameset&gt;

&lt;/html&gt;

&lt;!-- STEP TWO:  Give each frame a name!  (frame name="left") --&gt;

 

&lt;!-- Script Size:  0.70 KB  --&gt;</textarea><br></td></tr></form>

<tr><td BGCOLOR=yellow><font FACE="helvetica,arial,geneva"><b>JavaScript Source Code 3000:  Navigation:  Change 2 Frames (Links Page)</b>
<p>Simply click inside the window below, use your cursor to highlight the script, and copy (type Control-c or Apple-c) the script into a new file in your text editor (such as NotePad or SimpleText) and save (Control-s or Apple-s).  The script is yours!<br><br></font></td></tr>
<tr><td BGCOLOR=yellow ALIGN=CENTER>
<form NAME="copy2">

<DIV align="center">
<input type=button value="Highlight All" onClick="javascript:this.form.txt.focus();this.form.txt.select();">&nbsp;&nbsp;&nbsp;&nbsp;
<INPUT TYPE="text" NAME="total" VALUE="Script Size:  0.96 KB  " size="24">
</DIV>

<textarea NAME="txt" ROWS=20 COLS=75 WRAP=VIRTUAL>

&lt;!-- TWO STEPS TO INSTALL CHANGE 2 FRAMES (LINKS PAGE):

   1.  Put the first code in the HEAD of your links page
   2.  Copy the links code into the BODY of your links page --&gt;

&lt;!-- STEP ONE: Put this code into the HEAD of your links document  --&gt;

&lt;HEAD&gt;


&lt;SCRIPT LANGUAGE="JavaScript"&gt;

&lt;!-- Begin
function loadFrames(frame1,page1,frame2,page2) {
eval("parent."+frame1+".location='"+page1+"'");
eval("parent."+frame2+".location='"+page2+"'");
}
// End --&gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;!-- STEP TWO:  Change all the links to the BODY of your links page  --&gt;


&lt;BODY&gt;

Our Links...&lt;br&gt;
&lt;br&gt;
Click a link below to get started!
&lt;br&gt;
&lt;br&gt;

&lt;a href="javascript:loadFrames('Frame_A', 'page-1.html', 'Frame_B', 'page-2.html')"&gt;Load Page 1 & Page 2&lt;/a&gt;&lt;br&gt;
&lt;br&gt;
&lt;a href="javascript:loadFrames('Frame_A', 'page-3.html', 'Frame_B', 'page-3.html')"&gt;Load Page 3 & Page 4&lt;/a&gt;&lt;br&gt;
&lt;br&gt;
&lt;center&gt;Or ....&lt;br&gt;
&lt;a href="no-frames-home.html" target="_top"&gt;Go to site without frames&lt;/a&gt;&lt;/center&gt;

 

&lt;!-- Script Size:  0.96 KB  --&gt;</textarea><br><font FACE="helvetica,arial,geneva"></font></td></tr>

</table>
</form>
</FONT>
</CENTER>


</center>
</body></html>